<template>
  <!-- 右侧表格内容 -->
  <div class="table_cont" v-loading="loading">
    <div class="crumbs">
      <span>任务列表</span> >> <span>{{ TapModuleName }}</span>
    </div>
    <!-- 表格按钮组 -->
    <div class="tabOpt">
      <div class="taskcom_button" @click="mattersAttentionHandle">
        <i class="btn_icon danger"></i>
        <span>注意事项</span>
      </div>
			<div class="taskcom_button" @click="uploadBJImg">
        <i class="btn_icon up"></i>
        <span>上传布局图</span>
        <input
          id="uploadBJImg"
          type="file"
          ref="clearFile"
          @change="getFileBJImg($event)"
          class="add-file-right-input"
          style="display: none"
        />
      </div>
			<div
        v-if="layoutId"
        class="taskcom_button"
        @click="openBZImg"
      >
        <i class="btn_icon ck"></i>
        <span>查看布局图</span>
      </div>
      <div class="novideo taskcom_button" v-else>
        <i class="btn_icon ck"></i>
        <span>查看布局图</span>
      </div>

      <div class="taskcom_button" @click="uploadBZImg">
        <i class="btn_icon up"></i>
        <span>上传布置图</span>
        <input
          id="uploadBZImg"
          type="file"
          ref="clearFile"
          @change="getFileBZImg($event)"
          class="add-file-right-input"
          style="display: none"
        />
      </div>
      <div
        v-if="assignId"
        class="taskcom_button"
        @click="openBZImg"
      >
        <i class="btn_icon ck"></i>
        <span>查看布置图</span>
      </div>
      <div class="novideo taskcom_button" v-else>
        <i class="btn_icon ck"></i>
        <span>查看布置图</span>
      </div>
      <div class="taskcom_button" @click="uploadVideo">
        <i class="btn_icon up"></i>
        <span>上传视频</span>
        <input
          id="uploadVideo"
          type="file"
          ref="clearFile"
          @change="getFile($event)"
          class="add-file-right-input"
          style="display: none"
        />
      </div>
      <div v-if="videoSrc" class="taskcom_button" @click="openVideo">
        <i class="btn_icon video"></i>
        <span>视频预览</span>
      </div>
      <div class="novideoImg taskcom_button" v-else>
        <i class="btn_icon video"></i>
        <span>视频预览</span>
      </div>
      <div class="taskcom_button" @click="openModule">
        <i class="btn_icon down"></i>
        <span>模板导入</span>
        <input
          id="uploadModule"
          type="file"
          ref="clearFile"
          @change="getFileModule($event)"
          class="add-file-right-input"
          style="display: none"
        />
      </div>
      <div class="taskcom_button" @click="downloadModule">
        <i class="btn_icon down"></i>
        <span>下载模板</span>
      </div>
      <div class="active taskcom_button float_right" @click="newAdd">
        <i class="btn_icon add"></i>
        <span>新增任务</span>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table">
      <el-table ref="multipleTable" :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" type="index" width="55">
        </el-table-column>
        <el-table-column prop="proName" label="试验项目">
          <template slot-scope="scope">
            <el-input
              type="text"
              v-model="scope.row.proName"
              size="small"
              v-show="scope.row.edit"
            ></el-input>
            <span v-show="!scope.row.edit">{{ scope.row.proName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="mediaId" label="多媒体示范" width="120">
          <template slot-scope="scope">
            <img
              class="sbimg"
              src="../../../assets/images/icon-up.png"
              alt=""
              @click="upimg(scope.$index, scope.row)"
            />
            <input
              :id="`uploadimg` + scope.$index"
              type="file"
              ref="clearFile"
              @change="getFileIMG($event, scope.row)"
              class="add-file-right-input"
              style="display: none"
            />
            <img
              v-if="!scope.row.mediaId"
              class="sbimg dis"
              src="../../../assets/images/icon-img-dis.png"
              alt=""
            />
            <img
              v-if="scope.row.mediaId"
              @click="openImg(scope.row)"
              class="sbimg"
              src="../../../assets/images/icon-img-act.png"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="开始测试" width="120">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row, 'KSCS')" type="text"
              >设置</el-button
            >
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <div class="flex">
              <div
                class="table-edit"
                src="../../../assets/images/editIcon.png"
                @click="editData(scope)"
                v-show="!scope.row.edit"
              ></div>
              <img
                style="cursor: pointer"
                src="../../../assets/images/saveIcon.png"
                @click="saveDatas(scope.row)"
                v-show="scope.row.edit"
                alt=""
              />
              <div class="table-delete" @click="deleteRow(scope.row)"></div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <equipment-add
      v-if="showAddDIalog"
      :modelType="modelType"
      :taskId="$route.query.taskId"
      @cancel="cancelAddDialog"
    ></equipment-add>
    <check-object
      v-if="showCheckObj"
      :taskId="taskId"
      :billId="billId"
      :billName="billName"
      :modelType="modelType"
      :testType="testType"
      @cancel="cancelCheckObj"
    ></check-object>
    <matters-attention
      v-if="showMattersAtion"
      :modelType="modelType"
      @cancel="cancelMattersAtion"
    ></matters-attention>
    <video-dialog
      v-if="videoDialog"
      :src="videoSrc"
      @close="videoDialog = false"
    />
    <video-dialog
      v-if="videoDialog2"
      :src="videoSrc2"
      @close="videoDialog2 = false"
    />
  </div>
</template>
<script>
import { mapState } from "vuex";
import Header from "@/components/Header";
import HeaderNav from "@/components/HeaderNav";
import leftTapside from "@/components/leftTapSide/index";
import equipmentAdd from "@/components/EquipmentAdd.vue";
import checkObject from "@/components/CheckObject.vue";
import mattersAttention from "@/components/MattersAttention.vue";
import videoDialog from "@/components/VideoDialog.vue";
import api from "@/api/taskApi";
export default {
  computed: {
    ...mapState({
      isTapModule: (state) => state.TaskModule.isTapModule,
      TapModuleName: (state) => state.TaskModule.TapModuleName,
    }),
  },
  data() {
    return {
      tableData: [],
      showAddDIalog: false,
      showMattersAtion: false,
      videoDialog: false,
      videoDialog2: false,
      videoSrc: "",
      videoSrc2: "",

      showCheckObj: false,
      loading: false,
      addArr: [],
      taskId: "",
      billId: "",
      billName: "",
      modelType: "SBZK",
      testType: "",
      addArrImg: [],
      layoutId: "", //布置图
      assignId: "", //布局图
    };
  },
  created() {
    this.taskId = Number(this.$route.query.taskId);
    this.getTaskList();
    this.getViedoUrl();
  },
  components: {
    leftTapside,
    Header,
    HeaderNav,
    equipmentAdd,
    mattersAttention,
    videoDialog,
    checkObject,
  },
  methods: {
    editData(scope) {
      this.tableData = this.tableData.splice(0);
      this.tableData.forEach((item, i) => {
        if (scope.$index == i) {
          this.$set(this.tableData[i], "edit", true);
          this.$forceUpdate();
        } else {
          this.$set(this.tableData[i], "edit", false);
          this.$forceUpdate();
        }
      });
    },
    saveDatas(row) {
      console.log(row);
      let params = {
        list: [
          {
            proName: row.proName,
            modelType: this.modelType,
            id: row.id,
            taskId: this.taskId,
          },
        ],
      };
      api
        .saveTaskOtherApi(params)
        .then((res) => {
          if (+res.data.code == 200) {
            row.edit = false;
            this.getTaskList();
            this.$message.success("修改成功");
          } else {
            this.$message.error(res.data.msg || "修改失败");
          }
        })
        .catch((err) => {
          this.$message.error("修改失败");
        });
    },
    downloadModule() {
      window.open(location.origin + "/static/file/设备展开__模板.xlsx");
    },
    getTaskList() {
      let params = {
        pageNum: 1,
        pageSize: 99999,
        taskId: this.$route.query.taskId,
        modelType: "SBZK",
      };
      api.getTaskListOtherApi(params).then((res) => {
        console.log(res);
        if (+res.data.code == 200) {
          res.data.data.list.forEach((item) => {
            item.edit = false;
          });
          this.tableData = res.data.data.list;
        }
      });
    },
    newAdd() {
      this.showAddDIalog = true;
    },
    // 注意事项
    mattersAttentionHandle() {
      this.showMattersAtion = true;
    },
    cancelMattersAtion() {
      this.showMattersAtion = false;
    },
    cancelAddDialog(refresh) {
      if (refresh == 1) {
        this.getTaskList();
      }
      this.showAddDIalog = false;
    },
    //上传
    uploadVideo() {
      document.getElementById("uploadVideo").click();
    },
    // 上传布置
    uploadBZImg() {
      document.getElementById("uploadBZImg").click();
    },
    // 上传布局
    uploadBJImg() {
      document.getElementById("uploadBJImg").click();
    },
    // 上传模板
    openModule() {
      document.getElementById("uploadModule").click();
    },
    getFileModule(event) {
      console.log(event);
      console.log(event.target.files);
      var file = event.target.files;
      var fileName = file[0].name;
      var idx = fileName.lastIndexOf(".");
      if (idx != -1) {
        var ext = fileName.substr(idx + 1).toUpperCase();
        ext = ext.toLowerCase();
        if (ext != "xlsx" && ext != "xls" && ext != "csv") {
          return this.$message.warning("选择正确excel格式文件");
        }
        var formData = new FormData();
        formData.append("file", file[0]);
        formData.append("taskId", this.taskId);
        formData.append("modelType", this.modelType);
        this.loading = true;
        api
          .uploadFileModule(formData)
          .then((res) => {
            this.loading = false;
            if (+res.data.code == 200) {
              this.getTaskList();
              return this.$message.success("上传成功");
            } else {
              return this.$message.error(res.data.msg || "上传失败");
            }
          })
          .catch((err) => {
            this.loading = false;
            return this.$message.error("上传失败");
          });
      }
    },
    upimg(idx, row) {
      console.log("uploadimg" + idx);
      document.getElementById("uploadimg" + idx).click();
    },
    openImg(row) {
      if (row.mediaId.indexOf("png") > -1 || row.mediaId.indexOf("jpg") > -1) {
        this.$imageView([
          location.origin + "/bpapi/attach/download?attachId=" + row.mediaId,
        ]);
      } else if (row.mediaId.indexOf("mp4") > -1) {
        this.videoDialog2 = true;
        this.videoSrc2 =
          location.origin + "/bpapi/attach/download?attachId=" + row.mediaId;
      } else {
        this.$imageView([
          location.origin + "/bpapi/attach/download?attachId=" + row.mediaId,
        ]);
      }
    },
    getFileBZImg(event) {
      var file = event.target.files;
      for (var i = 0; i < file.length; i++) {
        // 上传类型判断
        var fileName = file[i].name;
        var idx = fileName.lastIndexOf(".");
        if (idx != -1) {
          var ext = fileName.substr(idx + 1).toUpperCase();
          ext = ext.toLowerCase();
          if (ext != "png" && ext != "jpg" && ext != "jpeg") {
            return this.$message.warning("选择png jpg jpeg图片格式");
          } else {
            this.addArrImg.push(file[i]);
            console.log(this.addArrImg);
          }
          var formData = new FormData();
          //  header参数 如果需要 自行配置
          // formData.append('num', this.addType);
          // formData.append('linkId',this.addId);
          // formData.append('rfilename',this.addFileName);
          // for(var i=0;i<this.addArrImg.length;i++){
          //     formData.append('file',this.addArrImg[i]);
          // }
          formData.append("file", file[0]);
          this.loading = true;
          api
            .uploadFile(formData)
            .then((res) => {
              if (+res.data.code == 200) {
                this.loading = false;
                //上传成功后 调用接口保存
                let params = {
                  assignId: res.data.data.attachId, //布置图
                  modelType: this.modelType,
                  taskId: this.taskId,
                };
                api.TaskModuleSaveApi(params).then((res) => {
                  this.getViedoUrl();
                });
                return this.$message.success("上传成功");
              } else {
                this.loading = false;
                return this.$message.error("上传失败");
              }
            })
            .catch((err) => {
              this.loading = false;
              return this.$message.error("上传失败");
            });
        }
      }
    },
    getFileBJImg(event) {
      var file = event.target.files;
      for (var i = 0; i < file.length; i++) {
        // 上传类型判断
        var fileName = file[i].name;
        var idx = fileName.lastIndexOf(".");
        if (idx != -1) {
          var ext = fileName.substr(idx + 1).toUpperCase();
          ext = ext.toLowerCase();
          if (ext != "png" && ext != "jpg" && ext != "jpeg") {
            return this.$message.warning("选择png jpg jpeg图片格式");
          } else {
            this.addArrImg.push(file[i]);
            console.log(this.addArrImg);
          }
          var formData = new FormData();
          //  header参数 如果需要 自行配置
          // formData.append('num', this.addType);
          // formData.append('linkId',this.addId);
          // formData.append('rfilename',this.addFileName);
          // for(var i=0;i<this.addArrImg.length;i++){
          //     formData.append('file',this.addArrImg[i]);
          // }
          formData.append("file", file[0]);
          this.loading = true;
          api
            .uploadFile(formData)
            .then((res) => {
              if (+res.data.code == 200) {
                this.loading = false;
                //上传成功后 调用接口保存
                let params = {
                  layoutId: res.data.data.attachId, //布局图
                  modelType: this.modelType,
                  taskId: this.taskId,
                };
                api.TaskModuleSaveApi(params).then((res) => {
                  this.getViedoUrl();
                });
                return this.$message.success("上传成功");
              } else {
                this.loading = false;
                return this.$message.error("上传失败");
              }
            })
            .catch((err) => {
              this.loading = false;
              return this.$message.error("上传失败");
            });
        }
      }
    },
    // 获取视频链接
    getViedoUrl() {
      let params = {
        modelType: this.modelType,
        taskId: this.taskId,
      };
      api.getTaskModuleOptApi(params).then((res) => {
        if (+res.data.code == 200) {
          console.log(res);
          if (res.data.data.mediaId) {
            this.videoSrc =
              location.origin +
              "/bpapi/attach/download?attachId=" +
              res.data.data.mediaId;
          }
          if (res.data.data.layoutId) {
            this.layoutId = res.data.data.layoutId;
          }
          if (res.data.data.assignId) {
            this.assignId = res.data.data.assignId;
          }
        }
      });
    },
    openVideo() {
      this.videoDialog = true;
    },
    openBZImg() {
      let arr = [];
      if (this.layoutId) {
        arr.push(
          location.origin + "/bpapi/attach/download?attachId=" + this.layoutId
        );
      }
      if (this.assignId) {
        arr.push(
          location.origin + "/bpapi/attach/download?attachId=" + this.assignId
        );
      }
      this.$imageView(arr);
    },

    getFile(event) {
      console.log(event);
      console.log(event.target.files);
      var file = event.target.files;
      for (var i = 0; i < file.length; i++) {
        //    上传类型判断
        var fileName = file[i].name;
        var idx = fileName.lastIndexOf(".");
        if (idx != -1) {
          var ext = fileName.substr(idx + 1).toUpperCase();
          ext = ext.toLowerCase();
          if (
            ext != "mp4" &&
            ext != "avi" &&
            ext != "mov" &&
            ext != "rmvb" &&
            ext != "rm" &&
            ext != "flv" &&
            ext != "3gp"
          ) {
            return this.$message.warning(
              "请选择常用格式的视频：mp4,avi,mov,flv,3gp"
            );
          } else {
            this.addArr.push(file[i]);
            console.log(this.addArr);
          }
          var formData = new FormData();
          //  header参数 如果需要 自行配置
          // formData.append('num', this.addType);
          // formData.append('linkId',this.addId);
          // formData.append('rfilename',this.addFileName);
          // for(var i=0;i<this.addArr.length;i++){
          //     formData.append('file',this.addArr[i]);
          // }
          formData.append("file", file[0]);
          this.loading = true;
          api
            .uploadFile(formData)
            .then((res) => {
              if (+res.data.code == 200) {
                this.loading = false;
                //上传成功后 调用接口保存
                let params = {
                  mediaId: res.data.data.attachId,
                  modelType: this.modelType,
                  taskId: this.taskId,
                };
                api.TaskModuleSaveApi(params).then((res) => {
                  // debugger
                  if (res.data.code == 200) {
                    this.getViedoUrl();
                  }
                });

                return this.$message.success("上传成功");
              } else {
                this.loading = false;
                return this.$message.error("上传失败");
              }
            })
            .catch((err) => {
              this.loading = false;
              return this.$message.error("上传失败");
            });
        } else {
        }
      }
    },
    getFileIMG(event, row) {
      console.log(event);
      console.log(event.target.files);
      var file = event.target.files;
      for (var i = 0; i < file.length; i++) {
        //    上传类型判断
        var fileName = file[i].name;
        var idx = fileName.lastIndexOf(".");
        if (idx != -1) {
          var ext = fileName.substr(idx + 1).toUpperCase();
          ext = ext.toLowerCase();
          // debugger
          if (
            ext != "png" &&
            ext != "jpg" &&
            ext != "mp4" &&
            ext != "jpeg" &&
            ext != "avi" &&
            ext != "mov" &&
            ext != "rmvb" &&
            ext != "rm" &&
            ext != "flv" &&
            ext != "3gp"
          ) {
            return this.$message.warning("选择图片或者视频");
          } else {
            this.addArr.push(file[i]);
            console.log(this.addArr);
          }
          var formData = new FormData();
          //  header参数 如果需要 自行配置
          // formData.append('num', this.addType);
          // formData.append('linkId',this.addId);
          // formData.append('rfilename',this.addFileName);
          // for(var i=0;i<this.addArr.length;i++){
          //     formData.append('file',this.addArr[i]);
          // }
          formData.append("file", file[0]);
          this.loading = true;
          api
            .uploadFile(formData)
            .then((res) => {
              if (+res.data.code == 200) {
                this.loading = false;
                //上传成功后 调用接口保存
                let params = {
                  list: [
                    {
                      mediaId: res.data.data.attachId + "&mediaType=" + ext,
                      id: row.id,
                      modelType: this.modelType,
                      taskId: this.taskId,
                    },
                  ],
                };
                api.saveTaskOtherApi(params).then((res) => {
                  if (res.data.code == 200) {
                    this.getTaskList();
                  } else {
                    this.$message.error(res.data.msg || "保存失败");
                  }
                });
                return this.$message.success("上传成功");
              } else {
                this.loading = false;
                return this.$message.warning("上传失败");
              }
            })
            .catch((err) => {
              this.loading = false;
            });
        } else {
        }
      }
    },
    deleteRow(row) {
      let params = {
        id: row.id,
      };
      this.$confirm("确定删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.deleteRowOtherApi(params).then((res) => {
            if (+res.data.code == 200) {
              this.getTaskList();
              return this.$message.success("删除成功");
            } else {
              return this.$message.error("删除失败");
            }
            console.log(res);
          });
        })
        .catch(() => {});
    },
    edit(row, type) {
      this.billId = row.id;
      this.billName = row.proName;
      this.testType = type;
      this.showCheckObj = true;
    },
    cancelCheckObj() {
      this.showCheckObj = false;
    },
  },
};
</script>
<style lang="less" scoped>
@import url("./taskComm.less");
</style>
<style lang="less">
@import url("./commtable.less");
</style>